<style lang="scss">
@import '@admin/views/Monitor/Source/device-details.scss';

.lift-hand-item-details {
  &__body {
    margin-bottom: 20px;
    height: 200px;
    display: flex;
    justify-content: center;

    &--left {
      width: 200px;
      height: 200px;
      margin-right: 20px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      & > img {
        width: auto;
        height: 80%;
      }
    }

    &--right {
      flex: 1;
      display: contents;
    }
  }

  &__direction-icon {
    font-size: 14px;
    line-height: 14px;
    padding: 5px;
    border-radius: 15px;
    color: #01b07f;
    background-color: rgba(1, 176, 127, 0.16);
    position: absolute;
    right: 20px;
    bottom: 20px;
  }

  &__video {
    height: 200px !important;
    width: auto !important;
    display: inline-block;

    & > video {
      height: 200px !important;
      width: auto;
    }
  }

  &__form {
    background-color: #f4f6f8;
    margin-bottom: 10px;
    border-radius: 4px;
    width: 200px;

    .el-form-item {
      margin-bottom: 0 !important;

      &__label {
        padding-left: 20px;
      }
    }
  }

  &__index {
    display: flex;
    align-items: center;
    background-color: #eff2f5;
    border-radius: 6px;
    padding: 10px 15px;

    &--label {
      flex: 1;
      color: #303133;
      font-weight: bold;
    }

    &--content {
      font-weight: 400;
    }
  }
}
</style>

<template>
  <div class="lift-hand-item-details">
    <el-alert
      v-if="messageAlarm && messageAlarm.alarmLevelId"
      class="device-details__alert"
      :title="`${messageAlarm.alarmTypeName} ${messageAlarm.alarmDetail}`"
      :type="{ 1: 'info', 2: 'warning', 3: 'error' }[messageAlarm.alarmLevelId]"
      :closable="false"
    >
    </el-alert>
    <div class="device-details__name">{{ info.deviceName }}</div>
    <div class="lift-hand-item-details__body">
      <div class="lift-hand-item-details__body--left">
        <img :src="img_lift" />
        <i class="lift-hand-item-details__direction-icon el-icon-top"></i>
        <!-- <i class="lift-hand-item-details__direction-icon el-icon-bottom"></i> -->
      </div>
      <div class="lift-hand-item-details__body--right">
        <CommonVideo class="lift-hand-item-details__video" id="721777022033670144" />
      </div>
    </div>
    <el-row style="margin-bottom: 10px" :gutter="20">
      <el-col :span="12">
        <div class="lift-hand-item-details__index">
          <div class="lift-hand-item-details__index--label">厂商：</div>
          <div class="lift-hand-item-details__index--content">{{ info.manufacturerName }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="lift-hand-item-details__index">
          <div class="lift-hand-item-details__index--label">型号：</div>
          <div class="lift-hand-item-details__index--content">{{ info.model }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px" :gutter="20">
      <el-col :span="12">
        <div class="lift-hand-item-details__index">
          <div class="lift-hand-item-details__index--label">安装时间：</div>
          <div class="lift-hand-item-details__index--content">2002-04-10</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="lift-hand-item-details__index">
          <div class="lift-hand-item-details__index--label">启用时间：</div>
          <div class="lift-hand-item-details__index--content">2002-05-10</div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px" :gutter="20">
      <el-col :span="12">
        <div class="lift-hand-item-details__index">
          <div class="lift-hand-item-details__index--label">维修次数：</div>
          <div class="lift-hand-item-details__index--content">{{ info.maintainCount }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="lift-hand-item-details__index">
          <div class="lift-hand-item-details__index--label">最近保养：</div>
          <div class="lift-hand-item-details__index--content">{{ info.maintainTime }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CORE from '@/CORE'

import { deviceHospitalDto } from '@admin/views/Monitor/Source/api/hospital/dto.js'
import { messageAlarmDto } from './dto.js'
import deviceHospitalApi from '@admin/views/Monitor/Source/api/hospital/api.js'
import deviceHospitalPointApi from '@admin/views/Monitor/Source/api/hospital-point/api.js'
import img_lift from './lift.png'

export default {
  name: 'LiftHandItemDetails',
  data() {
    return {
      img_lift,
      info: deviceHospitalDto(),
      messageAlarm: messageAlarmDto(),
      repairRecord: [],
      deviceGraph: [],
      /**
       * 启动状态
       * 0 开
       * 1 关
       */
      isOpened: '',
    }
  },
  props: {
    /**
     * 设备id
     */
    id: {
      type: String,
      default: '',
    },
  },
  methods: {
    /**
     * 获取图片
     */
    getImg(deviceCategoryId, deviceTypeId) {
      const type = ['2', '3', '4'].includes(deviceCategoryId) ? 'point' : deviceTypeId
      return CORE.common(`tree/${deviceCategoryId}/${type}.png`)
    },
    /**
     * 点位控制（启动状态）
     * @param {String} status -设备状态
     */
    deviceIsOpenedChange(status) {
      deviceHospitalPointApi.hospitalPointControl({
        deviceId: this.id,
        tag: this.info.pointDiYxzt,
        status: Number(status),
      }).then((res) => {
        this.$message(res.comResp.msg)
        deviceHospitalApi.getDetail({ deviceId: this.id }).then((res) => {
          this.info = res.deviceHospital
          this.messageAlarm = res.messageAlarmDto
          this.repairRecord = [res.repairRecord]
          this.deviceGraph = res.deviceGraph || []
          this.isOpened = res.deviceHospital.pointDiYxztValue
        })
      }).catch(() => {
        this.$message('操作失败！')
        this.isOpened = ''
      })
    },
  },
  watch: {
    id(newId) {
      if (!newId) return

      deviceHospitalApi.getDetail({ deviceId: newId }).then((res) => {
        this.info = res.deviceHospital
        this.messageAlarm = res.messageAlarmDto
        this.repairRecord = [res.repairRecord]
        this.deviceGraph = res.deviceGraph || []
        this.isOpened = res.deviceHospital.pointDiYxztValue
      })
    },
  },
  mounted() {
    deviceHospitalApi.getDetail({ deviceId: this.id }).then((res) => {
      this.info = res.deviceHospital
      this.messageAlarm = res.messageAlarmDto
      this.repairRecord = [res.repairRecord]
      this.deviceGraph = res.deviceGraph || []
      this.isOpened = res.deviceHospital.pointDiYxztValue
    })
  },
}
</script>
